import 'package:flutter/material.dart';
import '../constants.dart' show AppColors, AppStyles, Constants;
import '../modal/conversation.dart'
    show Conversation, mockConversations, Device;

class ConversationPage extends StatefulWidget {
  @override
  _ConversationPageState createState() => _ConversationPageState();
}

class _ConversationPageState extends State<ConversationPage> {
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemBuilder: (BuildContext context, int index) {
        if (index == 0) {
          return _DeviceInfoItem(device: Device.MAC,);
        }
        return _ConversationItem(conversation: mockConversations[index]);
      },
      itemCount: mockConversations.length,
    );
  }
}

class _ConversationItem extends StatelessWidget {
  final Conversation conversation;

  const _ConversationItem({Key key, this.conversation})
      : assert(conversation != null),
        super(key: key);

  @override
  Widget build(BuildContext context) {
    // 根据图片的获取方式初始化头像组件
    Widget avatar;
    if (conversation.isAvatarFromNet()) {
      avatar = Image.network(conversation.avatar,
          width: Constants.ConversationAvatarSize,
          height: Constants.ConversationAvatarSize);
    } else {
      avatar = Image.asset(conversation.avatar,
          width: Constants.ConversationAvatarSize,
          height: Constants.ConversationAvatarSize);
    }

    Widget avatarContainer;
    if (conversation.unreadMsgCount > 0) {
      // 构造未读消息角标
      Widget unreadMsgCountText = Container(
        width: Constants.UnReadMsgNotifyDotSize,
        height: Constants.UnReadMsgNotifyDotSize,
        alignment: Alignment.center,
        decoration: BoxDecoration(
          borderRadius:
          BorderRadius.circular(Constants.UnReadMsgNotifyDotSize / 2.0),
          color: Color(AppColors.NotifyDotBg),
        ),
        child: Text(
          conversation.unreadMsgCount.toString(),
          style: AppStyles.UnreadMsgCountDotStyle,
        ),
      );

      avatarContainer = Stack(
        overflow: Overflow.visible,
        children: <Widget>[
          avatar,
          Positioned(
            child: unreadMsgCountText,
            right: -6,
            top: -6,
          )
        ],
      );
    } else {
      avatarContainer = avatar;
    }

    // 构造勿扰模式
    var _rightArea = <Widget>[
      Text(conversation.updateAt, style: AppStyles.DescStyle),
      SizedBox(
        height: 1.0,
      )
    ];

    if (conversation.isMute) {
      _rightArea.add(Icon(
        IconData(0xe755, fontFamily: Constants.IconFontFamily),
        color: Color(AppColors.ConversationMuteIcon),
        size: Constants.ConversationMuteIconSize,
      ));
    } else {
      _rightArea.add(
        Icon(
          IconData(0xe755, fontFamily: Constants.IconFontFamily),
          color: Colors.transparent,
          size: Constants.ConversationMuteIconSize,
        ),
      );
    }

    return Container(
      padding: const EdgeInsets.all(10.0),
      decoration: BoxDecoration(
          color: Color(AppColors.ConversationItemBg),
          border: Border(
              bottom: BorderSide(
                  width: Constants.DividerWidth,
                  color: Color(AppColors.DividerColor)))),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          avatarContainer,
          Container(
            width: 10.0,
          ),
          Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Text(
                    conversation.title,
                    style: AppStyles.TitleStyle,
                  ),
                  Container(
                    height: 5.0,
                  ),
                  Text(
                    conversation.des,
                    style: AppStyles.DescStyle,
                  )
                ],
              )),
          Container(
            width: 10.0,
          ),
          Column(
            children: _rightArea,
          )
        ],
      ),
    );
  }
}

class _DeviceInfoItem extends StatelessWidget {
  final Device device;

  const _DeviceInfoItem({this.device: Device.WIN})
      : assert(device != null);

  int get iconName {
    return device == Device.WIN ? 0xe75e : 0xe640;
  }

  String get DeviceName {
    return device == Device.WIN ? 'Windows' : 'Mac';
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.only(
          left: 24.0, top: 10.0, right: 24.0, bottom: 10.0),
      decoration: BoxDecoration(
          border: Border(
            bottom: BorderSide(
                width: Constants.DividerWidth,
                color: Color(AppColors.DividerColor)
            ),
          ),
          color: Color(AppColors.DeviceInfoItemBg)
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Icon(IconData(
              this.iconName,
              fontFamily: Constants.IconFontFamily
          ), size: 24.0, color: Color(AppColors.DeviceInfoItemIcon)),
          SizedBox(width: 16.0),
          Text('$DeviceName 微信已登录，手机通知已关闭。',
              style: AppStyles.DeviceInfoItemTextStyle),
        ],
      ),
    );
  }
}
